@import '../style/variables';
@import '../style/breakpoints';

.matero-sidebar-header {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  height: $toolbar-height-desktop;
  padding: 0 10px;
  overflow: hidden;

  @include bp-lt(small) {
    & {
      height: $toolbar-height-mobile;
    }
  }

  // Colorful
  .matero-header-white & {
    background-color: white;
  }
}

.matero-sidebar-main {
  height: calc(100% - #{$toolbar-height-desktop});
  overflow: auto;

  @include bp-lt(small) {
    & {
      height: calc(100% - #{$toolbar-height-mobile});
    }
  }
}
